import { Tabs, TabItem } from '@aws-amplify/ui-react';
import { ThemeAlert } from '@/components/ThemeAlert';

<ThemeAlert />
Step 1: Wrap your App with `ThemeProvider`

```jsx
import { ThemeProvider } from '@aws-amplify/ui-react';
const App = (
  <ThemeProvider>
    <MyApp>/* AmplifyUI */</MyApp>
  </ThemeProvider>
);
```

Step 2: Use the theme to style components

```jsx
// Option 1: Use the theme through component variations
import { Text } from '@aws-amplify/ui-react';
const MyComponent = ({ children }) => {
  return <Text variation="primary">{children}</Text>;
};

// Option 2: Get the theme object through the useTheme hook and style components with it
import { Text, useTheme } from '@aws-amplify/ui-react';
const MyComponent = ({ children }) => {
  const { tokens } = useTheme();
  return <Text color={tokens.colors.font.tertiary}>{children}</Text>;
};
```

Optional: To extend or override a token in the default theme, create a custom theme:

<Tabs>
  <TabItem title="JavaScript">
    ```jsx
    import { ThemeProvider, Theme } from '@aws-amplify/ui-react';

    // Step 1: Create a new Theme with your custom values
    const theme = {
      name: 'my-theme',
      tokens: {
        colors: {
          font: {
            primary: { value: '#008080' },
            // ...
          },
        },
      },
    };

    // Step 2: Pass the new theme to `ThemeProvider`
    // this will apply the theme to all Amplify UI components
    const App = (
      <ThemeProvider theme={theme}>
        <MyApp>/* AmplifyUI */</MyApp>
      </ThemeProvider>
    );
    ```

  </TabItem>
  <TabItem title="TypeScript">
    ```tsx
    import { ThemeProvider, Theme } from '@aws-amplify/ui-react';

    // Step 1: Create a new Theme with your custom values
    const theme: Theme = {
      name: 'my-theme',
      tokens: {
        colors: {
          font: {
            primary: { value: '#008080' },
            // ...
          },
        },
      },
    };

    // Step 2: Pass the new theme to `ThemeProvider`
    // this will apply the theme to all Amplify UI components
    const App = (
      <ThemeProvider theme={theme}>
        <MyApp>/* AmplifyUI */</MyApp>
      </ThemeProvider>
    );
    ```

  </TabItem>
</Tabs>